<template>
    <!-- 最外层宽高和主视频一致 -->
    <div :class="['video-player', fullPage ? 'full-page' : '']" :style="{ width: playerSty.width + 'px', height: playerSty.height + 'px' }">
        <div class="video-player-container">
            <!-- 主视频 -->
            <div :class="['main-box', (fullPage && isMain) ? 'full-page' : '']" :style="{ width: v.mainVideo.width + 'px', height: v.mainVideo.height + 'px',  zIndex: isMain ? 1 : 10000 }">
                <div class="container">
                    <!-- 名称 -->
                    <div class="video-name-per" v-if="isMain">
                        <span>{{ v.mainVideo.name }}</span>
                        <span> - {{ v.mainVideo.perspectiveName }}</span>
                    </div>
                    <!-- 视频容器 -->
                    <div class="play-container" ref="mainEl"></div>
                    <!-- 视频上方透明蒙层 -->
                    <div class="mask" @click="switchToMain(isMain)" :class="[!isMain ? 'free-click' : '',isAllReady?'':'all-ready']"></div>
                </div>
            </div>

            <!-- 副视频 -->
            <!-- v-show="v.subVideo.isShowSub" -->
            <div :class="['sub-box', (fullPage && !isMain) ? 'full-page' : '']" :style="{ width: v.subVideo.width + 'px', height: v.subVideo.height + 'px',  zIndex: !isMain ? 1 : 10000 }" >
                <div class="container">
                    <div class="video-name-per" v-if="!isMain">
                        <span>{{ !isMain ? v.mainVideo.name : v.subVideo.name }}</span>
                        <span> - {{ !isMain ? v.mainVideo.perspectiveName : v.subVideo.perspectiveName }}</span>
                    </div>
                    <div class="play-container" ref="subEl"></div>
                    <div class="mask" @click="switchToMain(!isMain)" :class="[isMain ? 'free-click' : '',isAllReady?'':'all-ready']"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import VideoPlayer from './Video';

window.videoPlayer = null;

export default {
    components: {},
    props: ['videoConfig'],
    data() {
        return {
            v: {
                // merge后的视频配置项
                mainVideo: {},
                subVideo: {},
            },
            playerSty: {
                // 最外层样式不变
                width: 0,
                height: 0,
            },
            // 当前是否为主视频
            isMain: true,
            // 当前是否全屏
            fullPage: false,
            // 两个视频是否都加载完
            isAllReady: false,
        };
    },
    computed: {},
    watch: {
        videoConfig: {
            handler() {
                // this.isShowSub = this.videoConfig.isShowSub;
                // 参数merge
                const mainVideo = {
                    elName: 'mainEl',
                    ...this.videoConfig.mainVideo,
                    ...this.videoConfig.common,
                };
                const subVideo = {
                    elName: 'subEl',
                    ...this.videoConfig.subVideo,
                    ...this.videoConfig.common,
                };
                this.playerSty = {
                    width: mainVideo.width,
                    height: mainVideo.height,
                };
                const mergeConfig = { mainVideo, subVideo };
                this.v = mergeConfig;
            },
            immediate: true,
            deep: true,
        },
    },
    created() {},
    mounted() {

    },
    destroyed() {},
    methods: {
        init() {
            // 视频初始化
            window.videoPlayer = new VideoPlayer(this.v, this);
        },
        // 主副视频切换
        switchToMain(isMain) {
            if (!window.videoPlayer) return;
            window.videoPlayer.switchToMain(isMain);
        },
    },
};
</script>
<style lang="scss" scoped>
.video-player {
  width: 100%;
  height: 100%;

  .video-player-container {
    position: relative;
    width: 100%;
    height: 100%;

    .main-box {
      position: absolute;
      margin-left: 100%;
      background-color: #000;
      transform: translateX(-100%);

      .container {
        position: relative;
        width: 100%;
        height: 100%;

        .video-name-per {
          position: absolute;
          top: 2%;
          left: 10px;
          height: 40px;
          color: white;
          font-size: 18px;
          line-height: 40px;
          z-index: 10001;
        }

        .play-container {
          width: 100%;
          height: 100%;
        }

        .mask {
          position: absolute;
          top: 0;
          left: 0;
          box-sizing: border-box;
          width: 100%;
          height: 100%;
          border: 1px solid red;
          cursor: pointer;
          pointer-events: none;
          z-index: 9999;
        }

        .free-click {
          pointer-events: all;
        }
      }
    }

    .sub-box {
      @extend .main-box;
      position: relative;
    }
  }
}

.full-page {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  z-index: 9999 !important;
}

.all-ready{
    pointer-events: none !important;
}
</style>
